import React from "react"
import { Image, Navigator, Text, View } from "@tarojs/components"
import clsx from "clsx"
import { makePagePath } from "@/utils/router"
import { pageMapper } from "@/constants/pageMap"

type IntroItem = {
  /** 招生简章ID */
  id: number
  /** 院校ID */
  schoolId: number
  title: string
  logo: string
  tags: string[]
}
type IProps = {
  className?: string
  introItem: IntroItem
}
/** 招生简章列表item */
const GpIntroBadgeItem: React.FC<IProps> = (props: IProps) => {
  const { className, introItem } = props
  const url = makePagePath(pageMapper.schollBadge, { id: introItem.id })
  return (
    <Navigator url={url} hoverClass="none">
      <View className={clsx("block flex flex-row", className)}>
        <View className="w-164px h-164px mr-24px">
          <Image src={introItem.logo} className="w-164px h-164px" mode="aspectFit" />
        </View>
        <View className="flex flex-col justify-between">
          <View className="yahei font-normal text-30px text-hex-2c2c35 leading-44px taroify-ellipsis--l2 ellipse_2">
            <Text>{introItem.title}</Text>
          </View>
          <View className="flex flex-row">
            {introItem.tags &&
              introItem.tags.map((l, index) => (
                <View
                  key={index}
                  className="yahei mr-8px font-normal text-24px text-hex-b8b8bf h-40px leading-40px rounded-4px bg-hex-f6f7f9 px-8px"
                >
                  <Text>{l}</Text>
                </View>
              ))}
          </View>
        </View>
      </View>
    </Navigator>
  )
}
export default GpIntroBadgeItem
